<script setup>
import { ref, onMounted } from 'vue';
const rain = ref(null);
onMounted(() => {
  const canvas = rain.value;
  if(!canvas) return false;
  const ctx = canvas.getContext('2d');

  // 雪花数组
  const snowflakes = [];

  // 创建雪花对象
  function createSnowflake() {
    return {
      x: Math.random() * canvas.width,
      y: Math.random() * -50,
      radius: Math.random() * 4 + 1, // 雪花半径
      speed: Math.random() * 1 + 0.5, // 雪花下落速度
      opacity: Math.random() * 0.5 + 0.5, // 雪花透明度
      angle: Math.random() * Math.PI * 2, // 雪花初始旋转角度
      angleSpeed: Math.random() * 0.05 - 0.025, // 雪花旋转速度
      wind: Math.random() * 2 - 1, // 雪花水平偏移量（模拟风）
    };
  }

  // 初始化雪花
  for (let i = 0; i < 100; i++) {
    snowflakes.push(createSnowflake());
  }

  // 绘制雪花
  function drawSnow() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.fillStyle = 'rgba(255, 255, 255, 0.8)';

    snowflakes.forEach((flake) => {
      ctx.save(); // 保存当前的绘图状态
      ctx.translate(flake.x, flake.y); // 将坐标原点移动到雪花的位置
      ctx.rotate(flake.angle); // 旋转雪花
      drawSnowflake(ctx, flake.radius); // 绘制雪花形状
      ctx.restore(); // 恢复之前保存的绘图状态

      flake.y += flake.speed;
      flake.x += flake.wind; // 水平偏移量（模拟风）
      flake.angle += flake.angleSpeed; // 旋转角度增加

      if (flake.y > canvas.height) {
        flake.y = Math.random() * -50;
        flake.x = Math.random() * canvas.width;
        flake.angle = Math.random() * Math.PI * 2; // 重置旋转角度
      }
    });

    requestAnimationFrame(drawSnow);
  }

  // 绘制雪花形状
  function drawSnowflake(ctx, radius) {
    // 计算六边形的顶点坐标
    const points = [];
      for (let i = 0; i < 6; i++) {
        const angle = (i * Math.PI * 2) / 6;
        points.push({
          x: radius * Math.cos(angle),
          y: radius * Math.sin(angle)
        });
      }

      // 绘制六边形
      ctx.beginPath();
      for (let i = 0; i < points.length; i++) {
        ctx.lineTo(points[i].x, points[i].y);
      }
      ctx.closePath();
      ctx.fillStyle = 'white';
      ctx.fill();

      // 绘制雪花的细节
      for (let i = 0; i < points.length; i++) {
        const angle = (i * Math.PI * 2) / 6;
        const x = points[i].x;
        const y = points[i].y;

        // 绘制小线段
        ctx.beginPath();
        ctx.moveTo(x, y);
        ctx.lineTo(x + radius * 0.3 * Math.cos(angle + Math.PI / 6), y + radius * 0.3 * Math.sin(angle + Math.PI / 6));
        ctx.closePath();
        ctx.fillStyle = 'white';
        ctx.fill();

        // 绘制小圆圈
        ctx.beginPath();
        ctx.arc(x + radius * 0.15 * Math.cos(angle + Math.PI / 6), y + radius * 0.15 * Math.sin(angle + Math.PI / 6), radius * 0.05, 0, Math.PI * 2);
        ctx.closePath();
        ctx.fillStyle = 'white';
        ctx.fill();
      }
  // ctx.beginPath();
  // ctx.moveTo(0, 0 - radius);
  // for (let i = 0; i < 6; i++) {
  //   ctx.rotate(Math.PI / 3);
  //   ctx.lineTo(0, 0 - radius * 0.5);
  //   ctx.rotate(Math.PI / 3);
  //   ctx.lineTo(0, 0 - radius);
  // }
  // ctx.closePath();
  // ctx.fillStyle = `rgba(255, 255, 255, 1)`; // 白色雪花
  // ctx.fill();
}

  drawSnow();
});

</script>


<template>
  <canvas ref="rain" class="rainCanvas" width="800" height="600"></canvas>
</template>


<style lang="less" scoped>
.rainCanvas {
  background: #000;
  border: 1px solid #ccc;
}
</style>